<script setup>
import System from '@/utils/system';
import { appStore } from '@/sotre/modules/app';

const { userInfo, appInfo } = toRefs(appStore());

const $post = inject('$post');

const tabs = ref([]);
const applications = ref([]);
const appid = ref('');
const allList = ref([]);

const offsetTop = computed(() => {
    if (System.info.uniPlatform === 'web') {
        return System.customBarHeight - 44 + 'px';
    }
    return System.customBarHeight + 'px';
});

uni.showLoading({
    title: '数据加载中...',
});

$post('/mall/getClassify', {
    title: '',
    active: true,
    pageIndex: 1,
    pageSize: 20,
}).then(r => {
    uni.hideLoading();
    appid.value = r.data.find(i => i.person)?.appid;
    const req = {
        appid: appid.value,
        title: '',
        typeChild: '',
    };
    $post('/platform/enterpriseApps/getMyEnterprisApp', req).then(res => {
        tabs.value = res.data.map((i, index) => ({
            name: i.title,
            id: index,
        }));
        allList.value = res.data;
        if (tabs.value.length) {
            applications.value = res.data[0].data;
        }
    });
});

function changeTab(e) {
    applications.value = allList.value[e.index].data;
}

function toSearch() {
    uni.navigateTo({
        url: '/pages/common/search?type=' + appid.value,
    });
}

function goChat(app) {
    if (
        userInfo.value.temporary &&
        userInfo.value.temporary === 1 &&
        new Date().getTime() < new Date(userInfo.value.tempEndTime).getTime()
    ) {
        return toChat(app);
    }
    if (!userInfo.value.currEnterpriseByCache.appUserPower) {
        return uni.showToast({
            title: '暂无权限,请先开通会员',
            icon: 'none',
        });
    }
    if (userInfo.value.currEnterpriseByCache.appUserPower.length) {
        const power = userInfo.value.currEnterpriseByCache.appUserPower.find(
            i => i.appid == app.appid
        );
        if (power && power.use) {
            toChat(app);
            return;
        }
        return uni.showToast({
            title: '暂无使用权限',
            icon: 'error',
        });
    } else {
        uni.showToast({
            title: '暂无权限,请先开通会员',
            icon: 'none',
        });
    }
}

function toChat(app) {
    appInfo.value = app;
    uni.navigateTo({
        url: '/pages/chat/chat',
    });
}
</script>

<template>
    <div class="home">
        <u-navbar title="我的应用" left-icon="" placeholder></u-navbar>
        <u-sticky bgColor="#fff" :offsetTop="offsetTop">
            <u-tabs
                :list="tabs"
                :activeStyle="{
                    color: '#303133',
                    fontWeight: 'bold',
                    transform: 'scale(1.05)',
                }"
                lineWidth="30"
                lineColor="#ffa968"
                @change="changeTab"
            >
                <template #right>
                    <div class="search" @click="toSearch">
                        <wd-icon name="search" size="18px"></wd-icon>
                    </div>
                </template>
            </u-tabs>
        </u-sticky>
        <div class="list">
            <div class="empty" v-if="applications.length === 0">
                <u-empty mode="data" text="暂无智能体数据，请前往平台添加"></u-empty>
            </div>
            <div class="item" v-for="item in applications" :key="item.id" @click="goChat(item)">
                <wd-img :src="item.icon" width="50px" height="50px" round mode="aspectFill">
                    <template #error>
                        <image
                            src="/static/image/fox.png"
                            style="width: 50px; height: 50px"
                            mode="widthFix"
                        ></image>
                    </template>
                </wd-img>
                <div class="info">
                    <div class="title">{{ item.title }}</div>
                    <div class="desc">{{ item.description || item.title }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.home {
    .search {
        padding: 0 15px;
    }
    .empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70vh;
    }
    .list {
        padding: 0 12px;
        display: flex;
        flex-direction: column;
        :deep(.item) {
            display: flex;
            align-items: center;
            padding: 12px 0;
            gap: 12px;
            .wd-img {
                border: 1px solid #cfcfcf;
            }
            .info {
                flex: 1;
                height: 60px;
                .title {
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }
                .desc {
                    font-size: 12px;
                    color: #666;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .add {
                width: 25px;
                height: 25px;
                background: #ffa968;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
            }
        }
    }
}
</style>
